<template>
    <el-form :model="formData" ref="formRef" label-width="5rem">
        <el-row type="flex" :gutter="10">
            <el-col :span="12">
                <el-form-item label="商品名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        clearable
                        placeholder="请输入商品名称"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商品编码" prop="code">
                    <el-input
                        v-model="formData.code"
                        clearable
                        placeholder="请输入商品编码"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商品分类" prop="type">
                    <el-select v-model="formData.type" clearable>
                        <el-option
                            v-for="(item, index) in []"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商品状态" prop="radio">
                    <el-radio-group v-model="formData.radio">
                        <el-radio-button label="全部"></el-radio-button>
                        <el-radio-button label="出售中"></el-radio-button>
                        <el-radio-button label="已下架"></el-radio-button>
                        <el-radio-button label="已售罄"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
export default {
    name: "member-search",
    data() {
        return {
            formData: {
                name: "",
                code: "",
                type: "",
                radio: ""
            }
        };
    },
    methods: {
        onConfirm() {
            this.$emit("search", this.formData);
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>